var gId = function(obj){
    return document.getElementById(obj);
}
var gTag = function(obj){
    return document.getElementsByTagName(obj);
}
var gClass = function(obj){
    return document.getElementsByClassName(obj);
}
var obj = {
    header : gTag('header')[0],
    footer : gTag('footer')[0],
    content : gId('content'),
    banner : gId('banner'),
    bannerLi : gClass('bannerLi'),
    oHeight : document.documentElement.clientHeight,
    btn : document.getElementById('btns').getElementsByTagName('span'),
    body : gTag('body')[0],
    view : gId('view'),
    entrance : gId('entrance')
}

//设置页面宽高位置等
var set = function(){
    var bHeight = obj.banner.offsetWidth;
    var len = obj.bannerLi.length;
    obj.banner.style.height = obj.banner.offsetWidth/3.17 + 'px';
    for(var i = 0;i<len;i++){
        obj.bannerLi[i].style.transform = 'translate3D('+bHeight * i+'px,0,0)';
    }
    obj.body.style.height = document.documentElement.clientHeight + 'px';
}
//焦点轮播图
var banner = function(){
    var idx = 0;
    var len = obj.bannerLi.length;
    var timer;
    obj.banner.addEventListener('touchstart',function(e){
        //记录点击时X点
        startPoint = e.touches[0].clientX;
        for(var i = 0;i<len;i++){
            obj.bannerLi[i].style.transition = '';
        }
    })
    obj.banner.addEventListener('touchmove',function(e){
        //记录移动时X点
        movePoint = e.touches[0].clientX - startPoint;
        var n = movePoint + obj.banner.offsetWidth;
        var p = movePoint - obj.banner.offsetWidth;
        obj.bannerLi[idx].style.transform = 'translate3D('+movePoint+'px,0,0)';
        obj.bannerLi[idx + 1] && (obj.bannerLi[idx + 1].style.transform = 'translate3D('+ n +'px,0,0)');
        obj.bannerLi[idx - 1] && (obj.bannerLi[idx - 1].style.transform = 'translate3D('+ p +'px,0,0)');
    })
    obj.banner.addEventListener('touchend',function(e){
        var boundary = obj.oHeight / 6;
        if (movePoint > boundary){
            if (idx < 1) {
                idx = 0
            } else {
                idx -= 1;
                console.log(idx);
            }
        }
        if (movePoint < -boundary){
            if (idx > 3) {
                idx = 4
            } else {
                idx += 1;
                console.log(idx);
            }
        }
        setBtn();
        obj.bannerLi[idx].style.transform = 'translate3D(0,0,0)';
        obj.bannerLi[idx + 1] && (obj.bannerLi[idx + 1].style.transform = 'translate3D(' + obj.oHeight + 'px,0,0)');
        obj.bannerLi[idx - 1] && (obj.bannerLi[idx - 1].style.transform = 'translate3D(-' + obj.oHeight + 'px,0,0)');

        obj.bannerLi[idx].style.transition = 'transform 0.3s';
        obj.bannerLi[idx + 1] && (obj.bannerLi[idx + 1].style.transition = 'transform 0.3s');
        obj.bannerLi[idx - 1] && (obj.bannerLi[idx - 1].style.transition = 'transform 0.3s');
    })
    var setBtn = function(){
        for (var i = 0;i<obj.btn.length;i++){
            obj.btn[i].style.background = '';
        }
        obj.btn[idx].style.background = '#FE5400';
    }
}
//页面滑动
var pageMove = function(){
    window.addEventListener('touchstart',function(e){
        startY = e.touches[0].clientY;

    })
    window.addEventListener('touchmove',function(e){
        clientY = e.touches[0].clientY - startY;
        e.preventDefault();
        obj.view.style.transform = 'translate3D(0,'+ clientY +'px,0)'
        console.log(clientY);
    })
    window.addEventListener('touchend',function(e){
        obj.view.style.transform = 'translate3D(0,'+ clientY +'px,0)'
    })
}
window.onload = function(){
    set();
    banner();
    pageMove();
    (function(){
        obj.entrance.style.height = obj.entrance.offsetWidth / 2.34 + 'px';
    })();
}
window.onresize = function(){
    set();
    (function(){
        obj.entrance.style.height = obj.entrance.offsetWidth / 2.34 + 'px';
    })();
}